<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="renderer" content="webkit" />
<title>sdEditor富文本编辑器 - 轻量级web富文本编辑器 - 移动端富文本编辑器 - 可视化Html网页编辑器</title>
<meta name="keywords" content="sdEditor,富文本编辑器,开源html编辑器,可视化html编辑器,移动端富文本编辑器">
<meta name="description" content="sdEditor是一款基于Jquery开发的轻量化、所见即所得的web富文本编辑器，体积小、安全性高、同时支持一个页面多次调用，支持移动端自适应使用。有效过滤XSS攻击，不破坏Html结构。">
<link rel="stylesheet" href="public/css/ui.css">
<link rel="stylesheet" href="public/css/style.css">
<script src="public/js/jquery.js"></script>
<script src="editor/editor.js"></script>
</head>

<body>
	    
	<h1>sdEditor富文本编辑器</h1>
    <div class="ui-demo">
        <div class="ui-tabs ui-tabs-white" data-href="1">
            <ul class="ui-tabs-nav">
                <li><a href="./">调用方式</a></li>
                <li><a href="./param.html">可选参数</a></li>
                <li><a href="./mode.html">模式演示</a></li>
                <li class="active"><a href="./toolbar.html">自定义工具条</a></li>
                <li><a href="./btn.html">自定义按钮</a></li>
                <li><a href="./upload.html">上传演示</a></li>
                <li><a href="./api.html">接口交互</a></li>
            </ul>
            <div class="ui-tabs-content">
                <div class="ui-tabs-pane active">
                     <!---->
                     <div class="ui-menu ui-menu-blue ui-mb-30"><div class="ui-menu-name">自定义工具条</div></div>
                     <div id="content"><h3><font color="#ff3300">sdEditor</font>支持自定义配置工具条。</h3>
<pre>$("#content").editor({toolbar:{left:['bold','italic','underline','strikethrough','removeformat','fontcolor','emoji'],right:['html']}});</pre>
<p><font color="#ff0100">提示：</font>right部分可以省略，根据自己需要设置。</p></div>
                     <div class="ui-menu ui-menu-blue ui-mt-30 ui-mb-30"><div class="ui-menu-name">工具条参数列表</div></div>
					 <div class="ui-table-wrap">
                        <table class="ui-table ui-table-border ui-table-hover ui-table-striped">
                            <thead class="ui-thead-gray">
                            <tr>
                                <th width="180">参数</th>
                                <th>用途</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>headline</td>
                                <td class="ui-text-left ui-text-gray">标题</td>
                            </tr>
                            <tr>
                                <td>fontfamily</td>
                                <td class="ui-text-left ui-text-gray">字体</td>
                            </tr>
                            <tr>
                                <td>fontsize</td>
                                <td class="ui-text-left ui-text-gray">字体大小</td>
                            </tr>
                            <tr>
                                <td>fontcolor</td>
                                <td class="ui-text-left ui-text-gray">文字颜色</td>
                            </tr>
                            <tr>
                                <td>bgcolor</td>
                                <td class="ui-text-left ui-text-gray">背景颜色</td>
                            </tr>
                            <tr>
                                <td>justifyleft</td>
                                <td class="ui-text-left ui-text-gray">左对齐</td>
                            </tr>
                            <tr>
                                <td>justifycenter</td>
                                <td class="ui-text-left ui-text-gray">居中对齐</td>
                            </tr>
                            <tr>
                                <td>justifyright</td>
                                <td class="ui-text-left ui-text-gray">右对齐</td>
                            </tr>
                            <tr>
                                <td>justifyfull</td>
                                <td class="ui-text-left ui-text-gray">两端对齐</td>
                            </tr>
                            <tr>
                                <td>link</td>
                                <td class="ui-text-left ui-text-gray">超链接</td>
                            </tr>
                            <tr>
                                <td>unlink</td>
                                <td class="ui-text-left ui-text-gray">取消超链接</td>
                            </tr>
                            <tr>
                                <td>subscript</td>
                                <td class="ui-text-left ui-text-gray">上标</td>
                            </tr>
                            <tr>
                                <td>superscript</td>
                                <td class="ui-text-left ui-text-gray">下标</td>
                            </tr>
                            <tr>
                                <td>image</td>
                                <td class="ui-text-left ui-text-gray">图像</td>
                            </tr>
                            <tr>
                                <td>upload</td>
                                <td class="ui-text-left ui-text-gray">上传</td>
                            </tr>
                            <tr>
                                <td>bold</td>
                                <td class="ui-text-left ui-text-gray">加粗</td>
                            </tr>
                            <tr>
                                <td>italic</td>
                                <td class="ui-text-left ui-text-gray">斜体</td>
                            </tr>
                            <tr>
                                <td>underline</td>
                                <td class="ui-text-left ui-text-gray">下划线</td>
                            </tr>
                            <tr>
                                <td>strikethrough</td>
                                <td class="ui-text-left ui-text-gray">删除线</td>
                            </tr>
                            <tr>
                                <td>removeformat</td>
                                <td class="ui-text-left ui-text-gray">清除格式</td>
                            </tr>
                            <tr>
                                <td>InsertOrderedList</td>
                                <td class="ui-text-left ui-text-gray">数字列表</td>
                            </tr>
                            <tr>
                                <td>InsertUnorderedList</td>
                                <td class="ui-text-left ui-text-gray">项目列表</td>
                            </tr>
                            <tr>
                                <td>indent</td>
                                <td class="ui-text-left ui-text-gray">增加缩进</td>
                            </tr>
                            <tr>
                                <td>outdent</td>
                                <td class="ui-text-left ui-text-gray">减少缩进</td>
                            </tr>
                            <tr>
                                <td>emoji</td>
                                <td class="ui-text-left ui-text-gray">表情</td>
                            </tr>
                            <tr>
                                <td>table</td>
                                <td class="ui-text-left ui-text-gray">表格</td>
                            </tr>
                            <tr>
                                <td>line</td>
                                <td class="ui-text-left ui-text-gray">水平线</td>
                            </tr>
                            <tr>
                                <td>pagebreak</td>
                                <td class="ui-text-left ui-text-gray">分页标签</td>
                            </tr>
                            <tr>
                                <td>auto</td>
                                <td class="ui-text-left ui-text-gray">自动排版</td>
                            </tr>
                            <tr>
                                <td>down</td>
                                <td class="ui-text-left ui-text-gray">保存远程图片</td>
                            </tr>
                            <tr>
                                <td>date</td>
                                <td class="ui-text-left ui-text-gray">插入日期</td>
                            </tr>
                            <tr>
                                <td>clear</td>
                                <td class="ui-text-left ui-text-gray">清空编辑区</td>
                            </tr>
                            <tr>
                                <td>html</td>
                                <td class="ui-text-left ui-text-gray">html/代码模式</td>
                            </tr>
                            <tr>
                                <td>fullscreen</td>
                                <td class="ui-text-left ui-text-gray">全屏</td>
                            </tr>
                            <tr>
                                <td>preview</td>
                                <td class="ui-text-left ui-text-gray">预览</td>
                            </tr>
                            <tr>
                                <td>about</td>
                                <td class="ui-text-left ui-text-gray">关于</td>
                            </tr>
                            <tr>
                                <td>|</td>
                                <td class="ui-text-left ui-text-gray">间隔符</td>
                            </tr>
                            <tr>
                                <td>br</td>
                                <td class="ui-text-left ui-text-gray">换行</td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                     <!---->
                </div>
            </div>
        </div>
    </div>
    
    <script>
	$(function()
	{
		$("#content").editor({toolbar:{left:['bold','italic','underline','strikethrough','removeformat','fontcolor','emoji'],right:['html']}});
		
		/*以下和调用无关*/
		var isMobile=navigator.userAgent.toLowerCase().match(/(iPhone|Android|mobile)/i)?true:false;
		if(isMobile)
		{
			var index=$(".ui-tabs ul").find("li.active").index();
			if(index>2)
			{
				$(".ui-tabs .ui-tabs-nav").scrollLeft((index*90));
			}
		}
	})
	</script>

</body>
</html>